<template>
  <view class="login-container">
    <view class="logo">
      <image src="/static/logo.png" mode="aspectFit" />
      <text>华医数问诊所管理系统</text>
    </view>
	
    <view class="form">
		<tui-list-cell :hover="false" unlined>
			<view class="thorui-input-item">
				<tui-input v-model="username" label="姓名：" placeholder="请输入用户名"></tui-input>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false" unlined>
			<view class="thorui-input-item">
				<tui-input v-model="password"  password label="密码：" placeholder="请输入密码"></tui-input>
			</view>
		</tui-list-cell>
		
      <tui-form-button radius="50px" :loading="loading" @click="handleLogin">登录</tui-form-button>
    </view>
  </view>
</template>

<script>
import tuiFormButton from "@/components/thorui/tui-form-button/tui-form-button.vue"
export default {
	components:{
		tuiFormButton
	},
	data() {
		return {
		  username: '',
		  password: '',
		  loading: false
		}
	},
	methods: {
		async handleLogin() {
		  // 前端简单验证
		  if (!this.username.trim()) {
			uni.showToast({ title: '请输入用户名', icon: 'none' });
			return;
		  }
		  if (!this.password) {
			uni.showToast({ title: '请输入密码', icon: 'none' });
			return;
		  }

		  this.loading = true;
		  
		  try {
			// 调用云函数
			const res = await this.tui.request(
			  '/app/userAccount/login', // 接口路径
			  'POST',
			  {
				username: this.username,
				password: this.password
			  },
			  false, // 是否延迟显示loading
			  false, // 是否表单格式
			  false  // 是否隐藏loading
			);
			
			console.log(res)
			
			if (res.code == 200) {
			  uni.showToast({ title: '登录成功' });
			  
			  // 存储用户信息
			  uni.setStorageSync('userInfo', res.data);
			  
			  // 跳转到首页
			  setTimeout(() => {
				uni.reLaunch({ url: '/pages/index/index' });
			  }, 1500);
			  
			} else {
			  uni.showToast({ title: result.msg, icon: 'none' });
			}
			
		  } catch (e) {
			uni.showToast({ title: '登录失败，请重试', icon: 'none' });
			console.error(e);
		  } finally {
			this.loading = false;
		  }
		}
	  }
}
</script>

<style>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  height: 100vh;
  background-color: #f5f7fa;
}

.logo {
  margin-top: 120rpx;
  margin-bottom: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo image {
  width: 150rpx;
  height: 150rpx;
}

.logo text {
  margin-top: 20rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
}

.form {
  width: 90%;
}

.input {
  height: 90rpx;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  background: #fff;
  border-radius: 12rpx;
  border: 1rpx solid #dcdfe6;
  font-size: 30rpx;
}

.login-btn {
  margin-top: 50rpx;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #409eff;
  color: white;
  font-size: 34rpx;
  border-radius: 12rpx;
}
</style>